jQuery.fn.extend({
    picturePicker: function(settings){
        this.defaults = {
            maxSize: 5,
            fieldName: 'picture.id'
        };
        settings = $.extend(this.defaults, settings);
        
        var picture = this;
        
        function initDialog(){
            if ($('#picture_dialog').length != 1) {
                $('<div id="picture_dialog" title="<fmt:message key="picture" /><fmt:message key="operation.manage" />"></div>').appendTo('body');
                $('#picture_dialog').dialog({
                    width: 600,
                    height: 400,
                    modal: true,
                    resizable: false,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    },
                    autoOpen: false,
                    open:function(){
                    	$('select').hide();
                    },
                    close:function(){
                    	$('select').show();
                    
                    }
                });
                
                if ($.trim($('#picture_dialog').html()) == '') {
                    $('#picture_dialog').html('<div id="picture_tabs"></div>');
                    $('#picture_tabs ').append('<ul></ul>').append('<div id="upload_picture"></div><div id="browse_picture"></div>').find('ul').append('<li class="ui-tabs-nav-item"><a href="#upload_picture" id="upload_picture_link"><fmt:message key="operation.upload" /><fmt:message key="picture" /></a></li>').append('<li class="ui-tabs-nav-item"><a href="#browse_picture" id="browse_picture_link"><fmt:message key="picture.browse" /></a></li></ul>');
                    $('#picture_tabs > ul').tabs({});
                }
            }
        }
        
        function initTabsEvent(){
            $('#browse_picture_link').click(function(){
                $('.pictureTabs > ul').tabs('select', 1);
                $.get('${contextPath}/user/picture.htm', {
                    m: 'list',
                    picture: picture.attr('id'),
                    maxSize: settings.maxSize,
                    fieldName: settings.fieldName
                }, function(data){
                    $('#browse_picture').html(data);
                })
                return false;
            })
            
            
            $('#upload_picture_link').click(function(){
                $('#picture_tabs > ul').tabs('select', 0);
                $.get('${contextPath}/user/picture.htm', {
                    m: 'add',
                    picture: picture.attr('id'),
                    maxSize: settings.maxSize,
                    fieldName: settings.fieldName
                }, function(data){
                    $('#upload_picture').html(data);                                  
                })
                return false;
            })
        }
        
        function initPicture(){
            picture.find('.removeButton').click(function(){
                $(this).parent().remove();
            });
        }
        
        function init(){
            initDialog();
            initTabsEvent();
        }
        
        $(settings.button).one('click', init);
        
        $(settings.button).click(function(){
            $('#picture_dialog').dialog('open');
            $('#upload_picture_link').click();
        });
        initPicture();
    }
});
